$(function () {
    // 分类数据的动态渲染
    // 5、所有文章类别
    // 请求地址：/admin/category/list
    // 请求方式：get
    // 请求参数：无
    function init() {
        $.ajax({
            url: bignew.category_list,
            dataType: 'json',
            success: function (res) {
                console.log(res)
                if (res.code == 200) {
                    // 调用模板引擎的时候传入一个对象，在模板中可以使用这个对象的属性
                    let html = template('cateTemp', res)
                    $('tbody').html(html)
                }
            },
        })
    } init()
    // 分类数据新增--弹出模态框
    $('#xinzengfenlei').on('click', function () {
        $('.modal-title').text('新增分类')
        $('.btnopt').text('新增')
        $('#name').val('')
        $('#slug').val('')
        $('#myModal').modal('show')
    })
    // 分类数据新增--实现新增功能
    // 6、新增文章类别
    // 请求地址：/admin/category/add
    // 请求方式：post
    // 8、编辑文章类别
    // 请求地址：/admin/category/edit
    // 请求方式：post

    // 下面这个方法实现分类数据的新增和编辑
    function opt(url, data) {
        $.ajax({
            url: url,
            type: 'post',
            data: data,
            dataType: 'json',
            success: function (res) {
                if (res.code === 201 || res.code == 200) {
                    alert(res.msg)
                    $('#myModal').modal('hide')
                    init()
                }
            }
        })
    }
    $('.btnopt').on('click', function () {
        if ($(this).text() == '新增') {
            // 获取数据的常见的三种方式
            // 1.手动获取拼接：比较的繁琐，后期一般用于个别参数的追加
            // 2.serialize()
            // 3.formdata:主要用是上传文件资源
            opt(bignew.category_add, $('form').serialize())
        } else {
            let id = $(this).attr('id')
            opt(bignew.category_edit, $('form').serialize() + "&id=" + id)
        }
    })
    // 列表中的编辑按钮弹出模态框
    // 使用事件委托
    $('tbody').on('click', '.btnedit', function () {
        $('.modal-title').text('编辑分类')
        $('.btnopt').text('编辑')
        $('#myModal').modal('show')
        // 获取数据，数据是通过自定义属性的方式进行存储的
        // js原生：dom.dataset[key]  dom.dataset.key
        // jq：$().data().key  $().data('key')
        // $().data():可以获取当前元素中所有data-开头的自定义属性值，以对象的方式返回
        console.log($(this).data());
        let obj = $(this).data()
        $('#name').val(obj.name)
        $('#slug').val(obj.slug)
        // 将id存储在某个  以后取值方便的 位置
        $('.btnopt').attr('id', obj.id)
    })
    // 删除文字分类
    // 9,删除文章类别
    // 请求地址：/admin/category / delete
    // 请求方式：post
    $('tbody').on('click', '.btndel', function () {
        let id = $(this).data().id
        if (confirm('请问是否真的需要删除')) {
            $.ajax({
                type: 'post',
                url: bignew.category_delete,
                data: { id },
                dataType: 'json',
                success(res) {
                    console.log(res);
                    if (res.code == 204) {
                        alert(res.msg)
                        init()
                    }
                }
            })
        }
    })
})